<template>
  <div>
    <div class="searchForm">
      <el-form :model="searchFormData" :inline='true' label-width="100px" ref="ruleForm" :rules="rules">
        <div>
          <el-form-item label="配置名称：" prop="a">
            <el-input v-model="searchFormData.a" clearable placeholder="请输入配置a名称" size="mini"/>
          </el-form-item>
          <el-form-item label="配置名称c:" prop="b">
            <el-input v-model.trim="searchFormData.b" clearable placeholder="请输入b名称" size="mini"/>
          </el-form-item>
          <el-form-item label="参数标识：" prop="c">
            <el-select v-model="searchFormData.c" clearable placeholder="请选择参数c标识" size="mini">
              <el-option label="c1" value="c1"/>
              <el-option label="c2" value="c2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="参数标识b：" prop="d">
            <el-select v-model="searchFormData.d" clearable placeholder="请选择d标识" size="mini">
              <el-option label="b1" value="b1"/>
              <el-option label="bb2" value="bb2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="参数标识e：" prop="e">
            <el-select v-model="searchFormData.e" clearable placeholder="请选择e标识" size="mini">
              <el-option label="e1" value="e1"/>
              <el-option label="e2" value="e2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="参数标识f：" prop="f">
            <el-select v-model="searchFormData.f" clearable placeholder="请选择f标识" size="mini">
              <el-option label="f" value="f"/>
              <el-option label="f2" value="f2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="爱好：" prop="hobby">
            <el-select v-model="searchFormData.hobby" clearable placeholder="请选择hobby" size="mini">
              <el-option v-for="item in hobbyList" :label="item.label" :value="item.id" :key="item.id"/>
            </el-select>
          </el-form-item>

          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker :picker-options="pickerOptionsStart" v-model="searchFormData.startTime"
                            type="date" placeholder="选择日期时间" size="mini">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间:" prop="endTime">
            <el-date-picker :picker-options="pickerOptionsEnd" v-model="searchFormData.endTime"
                            type="date" placeholder="选择日期时间" size="mini">
            </el-date-picker>
          </el-form-item>

        </div>
        <div>
          <div style="display: flex;justify-content: flex-end">
            <el-form-item>
              <el-button type="primary" @click="searchOperate" size="mini">查询</el-button>
              <el-button @click="resetForm" size="mini">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div>
      <br>
      <br>
      <myTable :tableData="tableData"
               ref="searchtable"
               :loading="tableLoading"
               :table-config="tableConfig">
        <template slot="tableExtraOperate">
          <el-button type="primary" icon="el-icon-plus" @click="addConfig" size="mini">新增</el-button>
<!--          <el-button type="primary" icon="el-icon-upload" @click="exportData($refs.searchtable.selectedRows)" size="mini">多选导出</el-button>-->
          <el-button type="primary" icon="el-icon-upload" @click="exportData($refs.searchtable.selectedRow)" size="mini">单选导出</el-button>
          <br>
          <br>
        </template>

        <template slot="size" slot-scope="scope">
          <div v-if="scope.row.size>30" style="color: chartreuse">{{scope.row.size}}</div>
          <div v-else>{{scope.row.size}}</div>
        </template>

        <template slot="tableOperator" slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" plain @click.native.prevent="editData(scope)"> 修改 </el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" plain @click.native.prevent="deleteData(scope)"> 删除 </el-button>
        </template>
      </myTable>
    </div>

    <div style="display: flex;justify-content: flex-end">
      <myPagination
        v-show="pagination.total>0"
        :total="pagination.total"
        :page.sync="pagination.currentPage"
        :limit.sync="pagination.pageSize"
        :pageSizes="pagination.pageOptions"
        @getList="getList">
      </myPagination>
    </div>

    <Dialog
      :visible="dialogVisible"
      @cancel="cancel"
      @confirm="confirm"
      @handleClose="handleClose">
      <div>form表单</div>
    </Dialog>
  </div>



</template>

<script>
  import myPagination from "./components/Pagination"
  import myTable from "./components/Table"
  import Dialog from "./components/dialog"
  import axios from "axios"
  export default {
    name: "elformtablepagination",
    components: {
      myPagination,
      myTable,
      Dialog
    },
    created() {
      this.getList()
    },
    mounted() {

    },
    data() {
      return {
        tableLoading:false,
        tableConfig: {
          isRadio: true,
          topOperate: true,
          columnConfig: [
            { prop: 'id', label: 'ID',},
            { prop: 'name', label: '文件名称' },
            { prop: 'type', label: '文件类型' },
            { prop: 'size', label: '文件大小' ,isSlot:true,width: 150},
            { prop: 'name', label: '所属省份' , width: '150',formatter(row){
                // console.log(row)
                if (row.roleType==1){
                  return row.roleType+"@"
                }else{
                  return row.roleType+"@@"
                }

              }},
            { prop: 'operator', label: '操作'}
          ]
        },

        pagination: {
          total: 0, // 总数
          pageSize: 5, // 页面多少条数据
          currentPage: 1, // 当前在哪页
          pageOptions: [5, 10, 50, 100] // 页面选项
        },

        searchFormData: {
          a: "",
          b: "",
          c: "",
          d: "",
          e: "",
          f: "",
          startTime: "",
          endTime: "",
          hobby: ""
        },
        tableData:[],

        hobbyList: [
          {id: 1, label: "吃饭"},
          {id: 2, label: "睡觉"},
          {id: 3, label: "打豆豆"},
        ],
        rules: {
          a: [
            {required: true, message: '请输入', trigger: 'blur'},
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          b: [{required: true, message: '请输入', trigger: 'blur'}],
          c: [{required: true, message: '选择一条', trigger: 'blur'}],
          startTime: [{required: true, message: '开始时间不能为空', trigger: 'change'}],
          endTime: [{required: true, message: '结束时间不能为空', trigger: 'change'}]
        },
        /*时间选择控制*/
        pickerOptionsStart: {
          disabledDate: (time) => {
            if (this.searchFormData.endTime) {
              return time.getTime() > this.searchFormData.endTime;
            }
          }
        },
        pickerOptionsEnd: {
          disabledDate: (time) => {
            if(this.searchFormData.startTime){
              return time.getTime() < this.searchFormData.startTime;
            }

          }
        },

        //弹框
        dialogVisible: false
      }
    },
    methods: {
      //
      getList() {
        // 得到分页的参数
        console.log(this.pagination)
        let params = {...this.searchFormData, pageSize: this.pagination.pageSize, current: this.pagination.currentPage}
        console.log("查询的参数", params)
        this.tableLoading = true
        axios.get("http://localhost:9090/file/page", {
          // 参数 是表单数据+分页数据
          params: {
            pageNum: this.pagination.currentPage,
            pageSize:this.pagination.pageSize,
            name: "",
          },
          headers: {
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxIiwiZXhwIjoxNjU3NDIwMTM1fQ.NHAI4VisiRHMg4gwcOCEinHNw-ZqpNd0b8KtcYv6zuc'
          }
        }).then(res => {
          console.log("menuData", res.data)
          this.tableData =  res.data.data.records
          this.pagination.total =res.data.data.total
          this.tableLoading = false
        })
      },

      searchOperate() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.searchFormData.startTime = this.time(this.searchFormData.startTime)
            this.searchFormData.endTime = this.time(this.searchFormData.endTime)
            console.log(this.searchFormData)
            this.getList()
          } else {
            // this.$message.error("error")
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.ruleForm.resetFields();
        this.pagination.currentPage = 1
        this.getList()
      },


      addConfig() {
        this.$message.success('新增');
      },
      // 导出
      exportData(rows) {

        if (rows.length==0){
          this.$message.warning('选择一个数据');
        }else {
          console.log(rows)
        }

      },

      // 删除
      deleteData(row) {
        console.log(row)
   /*     this.$confirm('删除当前配置的省份登录方式，该省将无法使用当前登录方式登录和装维APP,确定删除改配置？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message.success('删除成功')
          this.$refs.searchTable.handleSearch()
        }).catch(r => {
          this.$message.error('删除失败')
        })*/
      },
      // 编辑
      editData(row) {
        console.log(row)
        this.dialogVisible = true
        // this.$message.success('编辑');
      },

      // 关闭对话框
      handleClose() {
        console.log("关闭对话框")
        this.dialogVisible = false
      },
      // 确认对话框
      confirm() {
        console.log("确认对话框")
        this.dialogVisible = false
      },
      // 取消对话框
      cancel() {
        console.log("取消对话框")
        this.dialogVisible = false
      },

      // 时间处理函数
      time(time, fmt = 'YYYY-MM-DD') { // YYYY-MM-DD || YYYY-MM-DD hh:mm:ss
        if (!time) return 0
        let date = new Date(time - 0);
        if (/(Y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, date.getFullYear() + '').substr(4 - RegExp.$1.length)
        }
        let o = {
          'M+': date.getMonth() + 1,
          'D+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds()
        }
        for (let key in o) {
          if (new RegExp(`(${key})`).test(fmt)) {
            let str = o[key] + ''
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
          }
        }

        return fmt
      },
      // 时间处理函数
      padLeftZero (str) {
        return ('00' + str).substr(str.length)
      }
    }
  }
</script>

<style scoped lang="scss">
  .searchForm {
    box-shadow: 0 -12px 8px 13px rgba(0, 0, 0, 0.06);
    color: silver;
    padding: 15px;

    .el-form-item {
      margin-bottom: 20px;
    }
  }


</style>
